/**
 * 首页的样式
 */

@import "style.less";

/* =================↓ 加载动画 ↓================= */
.loading-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fefefe;
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
  display: flex;
  justify-content: center;
  align-items: center;

  .loading {
    width: 312px;
    height: 170px;
    background: url(../images/loading.gif) no-repeat center;
    background-size: cover;
  }
}


/* =================↓ 导航栏菜单 ↓================= */
#navbar {
  background-color: transparent;
  border: 0 none;
  border-radius: 0;
  position: fixed;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 0;
  z-index: 10;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;

  .navbar-brand {
    padding: 30px 0;
  }

  .logo {
    height: 30px;
  }

  .navbar-nav {
    float: right;
    padding: 30px 0;

    li {
      a {
        color: #333333;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 30px !important;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;

        &:hover {
          background-color: transparent;
          color: @colorPrimary;
        }

        &:focus {
          background-color: transparent;
        }
      }

      // 导航栏的active样式
      &.active {
        a {
          background-color: transparent;
          color: @colorPrimary;
        }
      }
    }
  }

  &.minified {
    background-color: #ffffff;
    padding: 0;
    position: fixed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  }
}


/* =================↓ section的样式 ↓================= */
.section-wrapper {
  padding: 80px 0;
  overflow: hidden;

  // section中的标题
  .section-header {
    text-align: center;
    margin-bottom: 35px;

    h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 30px;
      color: #313131;

      span {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 30px;
      }
    }

    h2 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 30px;
      color: #313131;
    }

    p {
      font-family: 'Raleway', sans-serif;

      a {
        cursor: pointer;
      }
    }

    // 标题下面的横线
    .short-line {
      width: 100px;
      height: 1px;
      margin: 20px auto;
      background: @colorPrimary;
    }
  }
}


/* =================↓ 轮播图 ↓================= */
#slider {
  overflow: hidden;
  background-color: #28292e;

  // 轮播图的按钮
  .sp-buttons {
    padding-top: 10px;
    position: absolute;
    text-align: center;
    width: 0;
    bottom: 20px;

    .sp-button {
      border: 1px solid #fff;
      border-radius: 50%;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-block;
      height: 14px;
      margin: 4px;
      width: 14px;
    }
  }

  // 箭头
  .sp-arrow {
    width: 10px;
    height: 100px !important;
  }

  // 轮播图
  .main-slides {
    .img-overlay {
      position: absolute;
      background-color: rgba(218, 218, 234, 0.42);
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    h1 {
      &.slider-text-big {
        font-size: 48px;
        color: #ffffff;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 25px;
      }
    }

    p {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 30px !important;
      color: #ffffff;
      margin-bottom: 0;
    }
  }
}


/* =================↓ 环保动态 ↓================= */
#dynamic {
  // 动态列表
  .dynamic-list {
    // 单个动态
    .dynamic-item {
      text-align: center;

      .dynamic-icon {
        width: 100px;
        height: 100px;
        margin: 0 auto 30px;
        text-align: center;
        border: 8px solid #dadada;
        border-radius: 50%;
        line-height: 0;
        padding: 8px;
        -webkit-transition: all .35s linear;
        -moz-transition: all .35s linear;
        -o-transition: all .35s linear;
        transition: all .35s linear;

        i {
          line-height: 70px;
          font-size: 36px;
          color: #dadada;
        }

        &:hover {
          border: 1px solid rgba(0, 0, 0, 0);
          background: @colorPrimary;

          i {
            color: #ffffff;
          }
        }
      }

      h3 {
        text-align: center;
        font-size: 18px;
        color: #616161;
        margin-top: 0;
        margin-bottom: 15px;
        -webkit-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear;

        a {
          text-decoration: none;
          color: #858585;
          font-weight: bold;

          &:hover {
            color: #858585;
            font-weight: bold;
          }
        }
      }
    }
  }
}


/* =================↓ 环保新闻 ↓================= */
#news {
  .news-list {
    padding: 0 4%;

    .news-item {
      margin: 20px 0;
      text-align: center;

      .main {
        height: 290px;
        margin: 0 10px;

        img {
          width: 90%;
          height: 100%;
          border-radius: 12px;
          object-fit: cover;
        }
      }

      .title {
        margin-top: 12px;
        font-size: 18px;

        a {
          text-decoration: none;
        }
      }

      .from {
        font-weight: bold;
      }

    }
  }
}


/* =================↓ 环保视频 ↓================= */
#video {
  .video-list {
    padding: 0 8%;

    .video-item {
      padding: 0;

      p {
        text-align: center;
        font-size: 18px;
      }

      iframe {
        width: 100%;
        height: 358px;
      }

      &.left {
        .video {
          margin-left: 45px;
          margin-right: 45px;
        }
      }

      &.right {
        .video {
          margin-left: 45px;
          margin-right: 45px;
        }
      }
    }
  }

}


/* =================↓ 环保数据 ↓================= */
#data {
  // 数据列表
  .data-list {

    // 单个数据表
    .data-item {
      padding: 0 35px 15px 35px;

      .chart {
        height: 350px;
      }

      p {
        text-align: center;
      }
    }
  }
}


/* =================↓ 环保小知识 ↓================= */
#knowledge {
  // 列表
  .knowledge-list {
    // 单个小知识
    .knowledge-item {
      margin-bottom: 50px;
      text-align: center;

      i {
        font-size: 30px;
        border-radius: 50%;
        border: 4px solid #eee;
        padding: 30px;
        color: @colorPrimary;

        &:hover {
          color: #fff;
          background: @colorPrimary;
        }
      }

      h3 {
        font-size: 16px;
        margin-top: 25px;
        margin-bottom: 15px;
        color: @colorPrimary;
      }

      p {
        margin-bottom: 0;
      }
    }
  }
}


/* =================↓ footer ↓================= */
footer {
  background-color: #28292e;
  padding: 60px;
  overflow: hidden;

  .footer-content {
    text-align: center;

    .footer-logo {
      text-align: center;
      margin-bottom: 20px;

      img {
        height: 40px;
      }
    }
  }


  p {
    text-align: center;
    color: #818181;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 15px;
  }

  ul {
    display: inline-block;

    li {
      float: left;
      margin-right: 15px;
      border: 2px solid #818181;
      padding: 8px 10px;
      border-radius: 50%;
      width: 50px;

      &:last-child {
        margin-right: 0;
      }

      a {
        font-size: 21px;

        i {
          font-size: 21px;
          color: #818181;
          -webkit-transition: all .3s;
          -moz-transition: all .3s;
          -o-transition: all .3s;
          transition: all .3s;
        }
      }
    }
  }
}
